<template>
  <div>
    <el-card style="margin:20px;" class="box-card">
      <div class="left-top">
        <el-button
          style="float: right; margin-bottom: 15px;"
          type="success"
          icon="el-icon-edit"
          size="medium"
          :disabled="checkMeuns('baseMenus')"
          @click="showDialog=true,title='新增菜单'"
        >添加菜单</el-button>
      </div>
      <el-table
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        :data="tableData"
        :header-cell-style="{ background:'#F2F6Fc', color:'#000000'}"
        row-key="id"
        style="width:100%"
        :tree-props="{children:'childs'}"
      >
        <el-table-column
          prop="title"
          label="标题"
          width="200"
        >
          <template v-slot="scope">
            <span>
              <i :class="scope.row.pid === null && scope.row.childs ? 'el-icon-folder-opened' : scope.row.is_point ? 'el-icon-view' : scope.row.childs ? 'el-icon-folder-opened' : 'el-icon-document-remove'" />
            </span>
            {{ scope.row.title }}
          </template>
        </el-table-column>
        <el-table-column
          prop="code"
          label="权限点代码"
        />
        <el-table-column
          prop="address"
          label="操作"
          width="200"
          align="center"
        >
          <template v-slot="scope">
            <el-button type="primary" round size="small" :disabled="checkMeuns('baseMenus')" @click="edit(scope.row.id)">修改</el-button>
            <el-button type="danger" round size="small" :disabled="checkMeuns('baseMenus')" @click="del(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 弹层 -->
    <el-dialog :title="title" :visible="showDialog" @close="btnCancel">
      <!-- 表单 -->
      <el-form ref="perForm" :model="formData" :rules="rules" label-width="120px">
        <el-form-item label="权限组名称">
          <el-radio v-model="radio" label="1" :disabled="flag">菜单</el-radio>
          <el-radio v-model="radio" label="2" :disabled="flag">权限点</el-radio>
        </el-form-item>
        <el-form-item label="权限组名称">
          <el-select
            ref="selectTree"
            v-model="selectlist.title"
            filterable
            placeholder="请选择..."
          >
            <el-option :key="selectlist.id" :label="selectlist.title" :value="selectlist.title" style="height: auto" hidden />
            <el-tree
              ref="tree"
              :data="tableData"
              :props="defaultProps"
              :node-key="defaultProps.value"
              default-expand-all
              @node-click=" handleNodeClick"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="权限代码" prop="code">
          <el-input v-model="formData.code" style="width:90%" />
        </el-form-item>
        <el-form-item label="权限标题" prop="title">
          <el-input v-model="formData.title" style="width:90%" />
        </el-form-item>
      </el-form>
      <el-row slot="footer" type="flex" justify="center">
        <el-col :span="6">
          <el-button size="small" type="primary" @click="btnOK">确定</el-button>
          <el-button size="small" @click="btnCancel">取消</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { getMenusList, delMenusList, detailsMenusList, changeMenusList, addMenusList, changeChildsname } from '@/api/menus'
export default {
  data() {
    return {
      loading: true,
      title: '编辑菜单',
      radio: '1',
      showDialog: false,
      tableData: [],
      defaultProps: {
        value: 'id',
        label: 'title',
        children: 'childs'
      },
      page: {
        page: 1, // 当前页码
        size: 10, // 每页显示的条数
        total: 0 // 服务器的总数据
      },
      formData: {
          code: '',
          title: '',
          is_point: '',
          pid: '',
          id: ''
      },
      selectlist: {
id: '',
title: '请选择'
      },
      rules: {
      code: [{ required: true, message: '权限代码不能为空', trigger: 'blur' }],
      title: [{ required: true, message: '权限标题不能为空', trigger: 'blur' }]
      }
    }
  },
  computed: {
    flag() {
      return Boolean(this.formData.id)
    }
  },
  created() {
    this.getMenusList()
  },
methods: {
  handleNodeClick(tableData) {
   // console.log(tableData.id)
this.selectlist.id = tableData.id
this.selectlist.title = tableData.title
this.$refs.selectTree.blur()
  },
  // 获取菜单列表
 async getMenusList() {
  this.loading = true
  const res = await getMenusList(this.page)
 console.log(res, '列表')

  this.tableData = changeChildsname(res)
  this.loading = false
 },
 // 编辑
 async edit(id) {
 const res = await detailsMenusList(id)
 console.log(res, '----详情===')
 this.radio = res.is_point ? '2' : '1'
 this.formData = res
 this.selectlist.title = res.title
 if (res.pid !== null) {
   const res1 = await detailsMenusList(res.pid)
 this.selectlist.title = res1.title
 }
 this.title = '编辑菜单'
 this.showDialog = true
 },
 // 删除
async del(id) {
 await this.$confirm('您确定要删除该菜单节点吗？')
 await delMenusList(id)
 this.$message.success('删除成功')
 this.getMenusList()
 },
 // 弹窗所需函数
 btnCancel() {
  this.formData = {
          code: '',
          title: '',
          is_point: '',
          pid: '',
          id: ''
      }
    this.selectlist = {
      id: '',
      title: '请选择'
      }
      this.$refs.perForm.resetFields() // 重置校验字段清空表单绑定的所有数据
      this.showDialog = false
 },
async btnOK() {
  // 通过判断是否有id判断是新增还是编辑
  if (this.formData.id) {
    this.formData.pid = this.selectlist.id
await changeMenusList(this.formData)
this.$message.success('编辑菜单成功')
  } else {
    if (!this.selectlist.id) {
      this.formData.pid = null
    } else {
      this.formData.pid = this.selectlist.id
    }
    this.formData.is_point = !this.flag
    this.formData.id = new Date().getTime()
   await addMenusList(this.formData)
   this.$message.success('新增菜单成功')
  }

this.showDialog = false
this.getMenusList()
 }
}
}
</script>

<style scoped lang="scss">
div{
  overflow: hidden;
}
::v-deep .el-icon-folder-opened{
 color: #409eff;
 font-size: 20px;
 font-weight: 900;
}
::v-deep .el-icon-view{
 color: #409eff;
 font-size: 18px;
 font-weight: 900;
}
::v-deep .el-icon-document-remove{
 color: #409eff;
 font-size: 18px;
 font-weight: 900;
}
</style>
